<template>
    <p>
        Vuex
    </p>
    <p>count:{{ count }}</p>
    <p>tenTimes:{{ tenTimes }}</p>

    <button @click="updateVuexCount">修改count</button>
    <button @click="asyncIncrement">修改count-action</button>
    <p>moduleA:countA{{ store.state.a.countA }}</p>
    <p>moduleB:countB{{ store.state.b.countB }}</p>
    <p>moduleA:doubleCountA{{ store.getters.doubleCountA}}</p>
    <p>moduleB:doubleCountB{{ store.getters['b/doubleCountB'] }}</p>
    <button @click="moduleAincrementA">模块A-action-触发</button>
    <button @click="moduleAincrementB">模块B-action-触发</button>

    <button @click="moduleAasyncIncrementA">模块A-action-触发</button>
    <button @click="moduleAasyncIncrementB">模块B-action-触发</button>


</template>

<script setup>
import { computed } from 'vue'
import { useStore } from 'vuex'

//获得一个Vuex的实例化对象
const store = useStore()

const count = computed(() => store.state.count)
const tenTimes = computed(() => store.getters.tenTimes)

//触发mutations
const updateVuexCount = () => {
    store.commit("increment", { count: 20 })
}

//mutations
const moduleAincrementA =()=>{
    store.commit('incrementA')
}
const moduleAincrementB =()=>{
    store.commit('b/incrementB')
}


//actions
const asyncIncrement = () => {
    store.dispatch('asyncIncrement', { count: 30 })
}

const moduleAasyncIncrementA = () => {
    store.dispatch('asyncIncrementA')
}
const moduleAasyncIncrementB = () => {
    store.dispatch('b/asyncIncrementB')
}


</script>